<template>
	<view>
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" :interval="cycleInterval" duration="500">
			<swiper-item v-for="(item,index) in thisSwiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:'carousel',
		data:function() {
			return {
				thisSwiperList:[
					{
						id: 0,
						type: 'image',
						url: '/static/images/swiper/timg.jpeg'
					}, {
						id: 1,
						type: 'image',
						url: '/static/images/swiper/web-dd.jpeg',
					}
				]
			}
		},
		props:{  
			dotStyle:{
				type:Boolean,
				default:true
			},
			swiperList:{
				type:Array,  
				default: function(){ 
					return this.thisSwiperList;
				},
			},
			cycleInterval:{
				type:Number, 
				default:3000
			} 
		},
		watch:{
			'swiperList':{
				handler(newVal){
					console.log(newVal);  
					if(newVal){
						this.thisSwiperList = newVal;
						this.TowerSwiper('thisSwiperList');	
					}
				}, 
				deep:true,  
				immediate:true
			}
		},
		methods:{  
			TowerSwiper(name) {
				let list = this[name];  
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.thisSwiperList = list;
			}
		}
	}
</script> 

<style>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
	 
 .index-text-queue{
 	height: 25px; line-height: 25px;
 	border: 1px solid #D2F1F0;
 	background-color: #F1F1F1;
 }
 .text-queue-icon{
 	position: absolute; 
 	right: 5px; 
 	font-size: 18px;
 	color: block; 
 }
</style>
